<template>
  <div>
    <!-- 第一题：买点书练习 -->
    <div id="jobOne">
      <p>请选择你要购买的书籍</p>
      <ul>
        <li v-for="(item, index) in bookarr" :key="index">
          {{ item.name }}<button @click="buyit(index)">买书</button>
        </li>
      </ul>
      <table border="1" width="500" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>单价</th>
          <th>数量</th>
          <th>合计</th>
        </tr>
        <tr v-for="(item, index) in bookarr" :key="index">
          <th>{{ index + 1 }}</th>
          <th>{{ item.name }}</th>
          <th>{{ item.price + "￥" }}</th>
          <th>{{ item.count }}</th>
          <th>{{ item.price * item.count + "￥" }}</th>
        </tr>
      </table>
      <p>总价格为:{{ allbookadd + "￥" }}</p>
    </div>
    <br />
    <!-- 第二题：选你爱我求和 -->
    <div id="jobTwo">
      <!-- 无id时, 可以使用index(反正也是就地更新) -->
      <div style="display: inline-block" v-for="item in digitarr" :key="item">
        <input
          type="checkbox"
          @change="digitadd"
          :value="item"
          v-model="digitaddnum"
        />
        <span>{{ item }}</span>
      </div>
      <p>你选中的元素, 累加的值和为:{{ fdigitaddnum }}</p>
    </div>
    <!-- 第三题：导航切换高亮 -->
    <div id="jobThree">
      <div class="nav_left" id="navLeft">
        <div class="nav_content">
          <span
            :class="{ active: styreal == index }"
            v-for="(item, index) in navarr"
            :key="item.first_id"
            @click="actshow(index)"
            >{{ item.first_name }}</span
          >
        </div>
      </div>
      <div class="down">
        <i class="iconfont icon-xiajiantoubeifen gray"></i>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div id="jobFour">
      <div>
        <span>姓名:</span>
        <input type="text" v-model="newStdArr.name" />
      </div>
      <div>
        <span>年龄:</span>
        <input type="text" v-model.number="newStdArr.age" />
      </div>
      <div>
        <span>性别:</span>
        <select v-model="newStdArr.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="addNrev">添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in stdArr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.gender }}</td>
            <td>
              <button @click="stdDel(item.id)">删除</button>
              <button @click="stdEdit(item.id)">编辑</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VuecliDemoAnotherjob",

  data() {
    return {
      // 第一题
      bookarr: [
        {
          name: "水浒传",
          price: 107,
          count: 0,
        },
        {
          name: "西游记",
          price: 192,
          count: 0,
        },
        {
          name: "三国演义",
          price: 219,
          count: 0,
        },
        {
          name: "红楼梦",
          price: 178,
          count: 0,
        },
      ],
      allbookadd: 0,
      bookaddfn: "",
      //   第二题
      digitarr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      digitaddnum: [],
      fdigitaddnum: 0,
      digitadd: "",
      //   第三题
      navarr: [
        {
          first_id: "0",
          first_name: "热门",
        },
        {
          first_id: "621",
          first_name: "\u5496\u5561",
        },
        {
          first_id: "627",
          first_name: "\u996e\u98df",
        },
        {
          first_id: "279",
          first_name: "\u7537\u88c5",
        },
        {
          first_id: "294",
          first_name: "\u5973\u88c5",
        },
        {
          first_id: "122",
          first_name: "\u773c\u955c",
        },
        {
          first_id: "339",
          first_name: "\u5185\u8863\u914d\u9970",
        },
        {
          first_id: "391",
          first_name: "\u6bcd\u5a74",
        },
        {
          first_id: "35",
          first_name: "\u978b\u9774",
        },
        {
          first_id: "39",
          first_name: "\u8fd0\u52a8",
        },
        {
          first_id: "153",
          first_name: "\u7bb1\u5305",
        },
        {
          first_id: "119",
          first_name: "\u7f8e\u5986\u4e2a\u62a4",
        },
        {
          first_id: "355",
          first_name: "\u5bb6\u7eba",
        },
        {
          first_id: "51",
          first_name: "\u9910\u53a8",
        },
        {
          first_id: "334",
          first_name: "\u7535\u5668",
        },
        {
          first_id: "369",
          first_name: "\u5bb6\u88c5",
        },
        {
          first_id: "10",
          first_name: "\u5bb6\u5177",
        },
        {
          first_id: "223",
          first_name: "\u6570\u7801",
        },
        {
          first_id: "429",
          first_name: "\u6c7d\u914d",
        },
        {
          first_id: "546",
          first_name: "\u5065\u5eb7\u4fdd\u5065",
        },
        {
          first_id: "433",
          first_name: "\u5b9a\u5236",
        },
      ],
      styreal: false,
      //  第四题
      stdArr: [
        {
          id: 1,
          name: "jack",
          age: 22,
          gender: "male",
        },
        {
          id: 2,
          name: "RoseMary",
          age: 18,
          gender: "female",
        },
        {
          id: 3,
          name: "xansters",
          age: 23,
          gender: "male",
        },
      ],
      newStdArr: {
        name: "",
        age: "0",
        gender: "",
        id: "",
      },
      stdFlag: true, //用来判断当前页面是为添加还是编辑修改的全局变量
    };
  },

  mounted() {
    //   第一题
    this.bookaddfn = () => {
      this.allbookadd = 0;
      this.bookarr.forEach((item) => {
        this.allbookadd += item.price * item.count;
      });
      return this.allbookadd;
    };
    // 第二题
    this.digitadd = () => {
      this.fdigitaddnum = 0;
      this.digitaddnum.forEach((item) => {
        this.fdigitaddnum += item;
      });
      return this.fdigitaddnum;
    };
  },

  methods: {
    //   第一题
    buyit(indext) {
      this.bookarr.forEach((item, index) => {
        if (index == indext) {
          console.log(1);
          item.count++;
        }
      });
      this.bookaddfn();
    },
    //   第二题
    // 第三题
    actshow(indext) {
      this.styreal = indext;
    },
    // 第四题
    addNrev() {
      if (
        // 需求1：非空判断
        this.newStdArr.name.trim().length === 0 ||
        this.newStdArr.age === 0 ||
        this.newStdArr.gender.length === 0
      ) {
        return alert("输入为空");
      }
      //需求2：添加功能，当全局变量stdFlag为true时生效
      if (this.stdFlag) {
        let id =
          this.stdArr.length == 0
            ? 1
            : this.stdArr[this.stdArr.length - 1].id + 1;
        this.stdArr.push({
          name: this.newStdArr.name,
          age: this.newStdArr.age,
          gender: this.newStdArr.gender,
          id,
        });
      } else {
        //需求2：修改功能，与编辑功能搭配使用，当全局变量 stdFlag 为 false 时生效，编辑按钮的功能为修改 stdFlag 值

        let stdAlert = confirm("确定修改吗？");
        if (stdAlert) {
          // console.log(this.newStdArr.id);
          this.stdArr.forEach((item) => {
            // 在点击编辑按钮后，newStdArr.id 就被当前点击的 item.id 赋值，此时遍历  stdArr 数组，匹配item.id 与 newStdArr.id ，满足条件后重新赋值
            if (item.id === this.newStdArr.id) {
              item.name = this.newStdArr.name;
              item.age = this.newStdArr.age;
              item.gender = this.newStdArr.gender;
            }
          });
          this.newStdArr.id = "";
          this.newStdArr.name = "";
          this.newStdArr.age = "";
          this.newStdArr.gender = "";
        } else {
          return;
        }
      }
    },
    stdEdit(id) {
      // 编辑按钮，接受当前点击的item.id，并将其赋值给 newStdArr.id
      this.stdFlag = !this.stdFlag;
      if (this.stdFlag) {
        alert("添加模式");
      } else {
        alert("编辑模式");
      }
      this.newStdArr.id = id;
      // console.log(this.stdFlag);
      // console.log(id);
    },
    stdDel(id) {
      // 删除按钮
      if (this.newStdArr.id === id) {
        alert("编辑数据删除");
        this.stdFlag = true;
      }
      this.stdArr.forEach((item, index) => {
        if (item.id === id) {
          this.stdArr.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style lang="css" scoped>
/* 第三题 */
#jobThree {
  width: 100%;
  display: flex;
  margin: 0.2rem 0 0 0;
  position: relative;
}

/*左侧的导航样式*/
#jobThree .nav_left {
  width: 21.1875rem;
  overflow: scroll;
}

#jobThree .nav_left::-webkit-scrollbar {
  display: none;
}

#jobThree .nav_content {
  white-space: nowrap;
  padding: 0 0.7rem;
}

#jobThree .nav_content span {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

#jobThree .nav_content .active {
  border-bottom: 2px solid #7f4395;
  color: #7f4395;
}

#jobThree .nav_left,
#jobThree .down {
  float: left;
}

/*右侧导航部分*/
#jobThree .down {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#jobThree .gray {
  color: gray;
  display: inline-block;
  vertical-align: middle;
}
</style>